<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经费管理系统登录界面</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body class="body">
<!--登录框-->
<div class="loginc" style="background-color: #252E37;height: 363px;width: 482px;margin-left: auto;margin-right: auto;margin-top: 140px">
    <div style="height: 50px;width: 100%"></div>
<!--用户登录-->
    <div style="height: 40px;margin-left: auto;margin-right: auto;text-align: center">
        <span style="margin-left: auto;margin-right: auto;font-size: 30px;color: #2370D4;font-weight: 500;">用&nbsp;户&nbsp;登&nbsp;录</span>
    </div>
<!--账户名-->
    <div style="margin-top: 40px;">
        <input id="usernamed" name="username" type="text"
               class="inputc" placeholder=" 用户名 :"
               style="width: 400px;height: 50px;font-size: large;background-color: #DEEDF8;margin-left: 41px" />
    </div>
    <div style="margin-top: 25px;">
        <input  id="password" type="password" name="password"
               class="inputc" placeholder=" 密码 :"
               style="width: 400px;height: 50px;font-size: large;background-color: #DEEDF8;margin-left: 41px" />
    </div>
    <div style="margin-top: 25px;">
        <button onclick="login()" class="denglu" style="height: 48px;width: 100px;background-color: #2A5492;color: #2785A2;font-size: 22px;line-height: 44px;float: right;margin-right: 40px">登&nbsp;&nbsp;录</button>
        <button onclick="register()" class="zhuce" style="height: 48px;width: 100px;background-color: #263F5E;color: #2785A2;font-size: 22px;line-height: 44px;float: right;margin-right: 20px">注&nbsp;&nbsp;册</button>
    </div>
</div>
<!--    注册弹出框-->
<div id="div">
    <div style="width: 100%;height: 48px;background-color: #F4F7FD;border-bottom: #DFE4ED solid 1px;border-radius: 5px">
        <span style="color: #2D2F33;font-size: 22px;line-height: 48px;margin-left: 60px">用户注册</span>
    </div>
    <div style="width: 100%;height: 48px">
        <div style="float: left;margin-left: 40px">
            <span style="color: #2D2F33;font-size: 18px;line-height: 48px;">基本信息</span>
        </div>
    </div>
    <div style="height: 32px;width: 100%;margin-top: 20px">
        <div style="float: left">
            <span class="xing" style="margin-left: 40px">*</span><span class="infor">用户名</span>
            <input id="yname" oninput="if(value.length>7)value=value.slice(0,11)" type="text" class="inputzhuce" placeholder="请输入用户名" style="margin-left: 40px">
        </div>
        <div style="float: right">
            <span class="xing">*</span><span class="infor" style="margin-right: 40px">姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input id="zname" oninput="if(value.length>7)value=value.slice(0,11)" type="text" class="inputzhuce" placeholder="请输入姓名" style="margin-right: 40px;">
        </div>
    </div>
    <div style="height: 32px;width: 100%;margin-top: 40px">
        <div style="float: left">
            <span class="xing" style="margin-left: 40px">*</span><span class="infor">密码&nbsp;&nbsp;&nbsp;</span>
            <input id="ypassword0" oninput="if(value.length>7)value=value.slice(0,6)" type="password" class="inputzhuce" placeholder="请输入密码" style="margin-left: 40px">
        </div>
        <div style="float: right">
            <span class="xing">*</span><span class="infor" style="margin-right: 40px">核对密码</span>
            <input id="ypassword1" oninput="if(value.length>7)value=value.slice(0,6)" type="password" class="inputzhuce" placeholder="与上个密码保持一致" style="margin-right: 40px;">
        </div>
    </div>
    <div style="height: 32px;width: 100%;margin-top: 40px">
        <div style="float: left">
            <span class="infor" style="margin-left: 40px">手机号&nbsp;</span>
            <input id="yphone" oninput="if(value.length>7)value=value.slice(0,11)" type="number" class="inputzhuce" placeholder="请输入警号" style="margin-left: 40px">
        </div>
        <div style="float: right">
            <span class="infor" style="margin-right: 40px">身份证号</span>
            <input id="yid" oninput="if(value.length>7)value=value.slice(0,18)" type="text" class="inputzhuce" placeholder="请输入身份号" style="margin-right: 40px;">
        </div>
    </div>
    <div style="width: 100%;height: 54px;border-top: #DFE4ED solid 1px;margin-top: 125px;">
        <button onclick="zsubmint()"  class="enter" style="width: 62px;height: 32px;background-color: #2985F7;float: right;color: white;margin-top: 11px;margin-right: 20px">确认</button>
        <button  class="exit" style="width: 62px;height: 32px;background-color: white;float: right;margin-top: 11px;margin-right: 10px">取消</button>
    </div>
</div>
</body>
<script>
    //统一后端地址
    const ppath="http://localhost:8088/financeManager/";
    $(document).ready(function (){
        //退出注册
        $(".exit").click(function(){
            $("#div").hide(200,"linear");
            $(".loginc").show()
        });
    })
<!--登录验证成功页面跳转-->
    function login(){
        var  user={//用户对象
            id: null,
            userName: null,
            loginName: null,
            password: null,
            type: 2,
            idNo: null,
            phoneNo: null
        };
        user.loginName=$("#usernamed").val()
        user.password=$("#password").val()
        $.ajax({
            url: ppath+"tohome",
            type: "POST",
            async: false,
            contentType:"application/json;charset=UTF-8",
            data: JSON.stringify(user),
            // data: user,
            dataType: "text",
            success: function (result) {
                if(result!='error'){
                    $.cookie('userid', result, { expires: 1, path: '/' });
                    document.location.replace("index.html")
                }else {
                    alert("登录失败!用户名或密码有误！")
                }

            },
            error: function (res){
                alert("登录失败"+res)
            }
        });
    };
    //    用户注册  显示弹出框
    function register() {
        $(".loginc").hide()
        $("#div").show(200);
    }
    //注册提交表单
    function zsubmint(){
        var  user={
            id: null,
            userName: null,
            loginName: null,
            password: null,
            type: 2,
            idNo: null,
            phoneNo: null
        };
        var sf=$("#yid").val()
        var Expression=/^\d{17}[\d|X]$|^\d{15}$/;
        var objExp=new RegExp(Expression);
        //验证提示 str
        var mas=""
        if($("#yname").val().length==0){
            mas=mas+"用户名必填;"
        }
        if($("#zname").val().length==0){
            mas=mas+"姓名必填;"
        }
        if($("#ypassword0").val().length!=6){
            mas=mas+"密码必填6位;"
        }
        if($("#ypassword1").val().length!=6){
            mas=mas+"核对密码必填;"
        }
        if($("#yphone").val().length!=11 && $("#yphone").val().length>0){
            mas=mas+"手机号码长度应为11;"
        }
        if(objExp.test(sf)!=true && sf.length>0){
            mas=mas+"身份证号码格式有误;"
        }
        if($("#ypassword0").val()!=$("#ypassword1").val()){
            mas=mas+"两次密码不一致;"
        }
        if(mas.length>2){
            alert(mas)
        }
        if(mas.length<2){
            //提交注册表单
            user.userName=$("#zname").val()
            user.loginName=$("#yname").val()
            user.phoneNo=$("#yphone").val()
            user.idNo=$("#yid").val()
            user.password=$("#ypassword0").val()
            $.ajax({
                url: ppath+"registeruser",
                type: "POST",
                async: false,
                contentType:"application/json;charset=UTF-8",
                data: JSON.stringify(user),
                // data: user,
                dataType: "text",
                success: function (result) {
                    if(result!='error'){
                        alert("注册成功")
                        $("#div").hide(200,"linear");
                        $(".loginc").show()
                    }else {
                        alert("网络错误")
                    }
                },
                error: function (res){
                    alert("网络错误")
                }
            })
            // document.location.replace("register.html")
        }
    }
</script>
<style>
    .inputc {
        border: none;
    }
    .body{
        background-color: #272121;
    }
    .zhuce::after {
        border: none;
    }

    .denglu::after {
        border: none;
    }

    .zhuce {
        border-color: #2785A2;
        border-width: 1px;
        border-style: solid;
        outline: none;
    }

    .denglu {
        border-color: #2785A2;
        border-width: 1px;
        border-style: solid;
        outline: none;
    }
    .loginc {
        height: 363px;
        width: 482px;
        background-color: #252E37;
        margin-left: auto;
        margin-right: auto;
        margin-top: 135px;
        border-radius: 10px;
        box-shadow: 2px 2px 8px grey;
    }

    *::-webkit-input-placeholder {
        color: #757575;
    }

    *:-moz-placeholder {
        /* FF 4-18 */
        color: #757575;
    }

    *::-moz-placeholder {
        /* FF 19+ */
        color: #757575;
    }

    *:-ms-input-placeholder {
        /* IE 10+ */
        color: #757575;
    }
/*    用户注册弹窗css*/
    #div{
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        width:1000px;
        height:470px;
        display:none;
        background-color: white;
        border-radius: 5px;
    }
    .xing{
        color: #FF0000;
    }
    .infor{
        color: #73777D;
    }
    .inputzhuce{
        width: 286px;
        height: 32px;
        border: #CFD6E4 solid 1px;
        font-size: 16px;
        border-radius: 5px;
    }
    input::-webkit-input-placeholder {
        /* WebKit browsers，webkit内核浏览器 */
        color: #A2AABB;
        font-size: 16px;
    }
    input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #A2AABB;
        font-size: 16px;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #A2AABB;
        font-size: 16px;
    }
    input:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #A2AABB;
        font-size: 16px;
    }
    .enter{
        border: #CFD6E4 solid 1px;
        border-radius: 3px;
    }
    .exit{
        border: #CFD6E4 solid 1px;
        border-radius: 3px;
    }
</style>
</html>